我們在設計版面的時候，客戶常常要求這個圖片要上面一點還是下面一點等等，都是要設置物件margin和padding，margin 與 padding 分別控制物件的外間距與內間距，所以在這裡有4最常用的縮寫可以參考:

marign/padding 的1到4個值

1個數字 上右下左
2個數字 上下 左右
3個數字 上 右左 下
4個數字 上 右 下 左

example:

div{
    margin: 0 ;/*上下左右0*/
    margin: 0 auto;/*上下0 左右auto*/
	margin: 0 10 20;/*上0 左右10 下20*/
    margin: 0 10 20 30;/*上0 右10 下20 左30*/
  }

padding的注意事項

我們在設置背景圖片的時候，會遇設置padding時會增加div的大小，這時候圖片如果不夠大，就會跑版，所以我們有兩種方法解決這個問題，看以下範例:

example:

div{
    background-image: url(main.png);
    width: 800px; 
    height: 450px;
    margin: 0 auto;/*上下0左右auto*/
    padding: 50px;/*上右下左都是50px*/
    box-sizing: border-box;/*解決padding的問題*/
}

margin的注意事項

而設置margin top和bottom會遇到的問題:

1_遇到老爸會穿透(設置的距離超出父層)

2_遇到兄弟會重疊(設置的距離超出同層)

解決辦法:
使用padding取代margin一樣能達到一樣的效果(有時需要配合box-sizing:border-box使用)。